<template>
  <div class="pin">
    <div class="pin-j">
      <ul>
        <li class="pin-jia" v-for="(i,index) in list" :key="index">
          <div class="title">
            <div>
              <img :src="i.avatar" alt />
              <span>{{i.nickname}}</span>
            </div>
            <div class="time">{{i.createtime}}</div>
          </div>
          <div>{{i.content}}</div>
          <div class="clearfix">
            <div v-if="i.is_del" class="del" @click="del(i)">
              <img src="../assets/img/shanchu.png" alt />
            </div>
          </div>
        </li>
      </ul>
      <div @click="loading" v-if="total > page * size" class="loading">点击加载更多</div>
      <div v-else class="loading">暂无更多</div>
    </div>
    <div class="bottom">
      <input type="text" v-model="comment" placeholder="感觉不错 说两句" @focus="focus" @blur="blur" />
      <div v-if="!flag && !comment" class="pingjia">
        <img src="../assets/img/pinglun.png" alt />
        <span>{{total}}</span>
      </div>
      <van-button class="btn" v-else type="info" @click="submit">发表</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      size: 3,
      comment: "",
      flag: false,
      total: 0,
      list: []
    };
  },
  name: "pinjia",
  props: ["id"],
  async mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await this.$http.post(`api/index/get_comment`, {
        course_id: this.id,
        page: this.page,
        size: this.size
      });
      this.list.push(...res.data.list);
      this.total = res.data.count;
    },
    async loading() {
      this.page++;
      this.getData();
    },
    focus() {
      this.flag = true;
    },
    blur() {
      this.flag = false;
      window.scroll(0, 0);
    },
    async del(i) {
      await this.$dialog.confirm({
        title: "提示",
        message: "确定删除评论?"
      });
      await this.$http.post(`api/my/delete_comment`, {
        id: i.id
      });
      this.$toast.success("删除成功");
      this.getData();
    },
    async submit() {
      if (!this.comment) {
        this.$toast.fail("评论不能为空");
        return;
      }
      let res = await this.$http.post(`api/my/add_comment`, {
        v_course_id: this.id,
        comment: this.comment
      });
      this.$toast.success("评论成功");
      this.list = [];
      this.page = 1;
      this.comment = "";
      this.getData();
    }
  }
};
</script>
<style scoped>
.pin-jia {
  border-bottom: 1px solid #d2d2d2;
  padding: 18px;
}
.title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 15px;
  color: #333;
}
.title > div {
  display: flex;
  align-items: center;
}
.title img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}
.time {
  font-size: 10px;
  color: #999999;
}
.title + div {
  margin-top: 20px;
  font-size: 12px;
  color: #666666;
}

.bottom {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  border-top: 1px solid #f3f3f3;
}
.bottom input {
  outline: none;
  border: none;
  width: 260px;
  height: 36px;
  margin-top: 7px;
  background: #e8ecf0;
  color: #666666;
  line-height: 36px;
  font-size: 12px;
  border-radius: 18px;
  padding: 0 18px;
  box-sizing: border-box;
}
.bottom img {
  width: 20px;
  height: 19px;
  margin-top: 15px;
}
.pingjia {
  width: 60px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
}
.btn {
  height: 36px;
  line-height: 36px;
  margin-top: 7px;
}
.del {
  float: right;
  height: 16px;
  width: 14px;
}
.del img {
  width: 100%;
  height: 100%;
}
.clearfix {
  overflow: hidden;
}
.loading {
  color: #666666;
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
}
</style>